---
image: /generated/articles-docs-transitions.png
id: transitioning
title: Transitions
crumb: "Techniques"
---

# Transitions<AvailableFrom v="4.0.59"/>

import { TransitionsDuration } from "../components/TransitionsDuration";
import { Presentations } from "../components/TableOfContents/transitions/presentations";
import { Timings } from "../components/TableOfContents/transitions/timings";

To transition between two types of absolutely positioned content, you can use the [`<TransitionSeries>`](/docs/transitions/transitionseries) component.

```tsx twoslash title="SlideTransition.tsx"
import { AbsoluteFill } from "remotion";

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({ children, color }) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: "center",
        alignItems: "center",
        fontSize: 200,
        color: "white",
      }}
    >
      {children}
    </AbsoluteFill>
  );
};
// ---cut---
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
```

<Demo type="slide" />

## Enter and exit animations

You don't necessarily have to use `<TransitionSeries>` for transitions between scenes. You can also use it to animate the entrace or exit of a scene by putting a transition first or last in the `<TransitionSeries>`.

[See example](/docs/transitions/transitionseries#enter-and-exit-animations)

## Duration

In the above example, `A` is visible for 40 frames, `B` for 60 frames and the duration of the transition is 30 frames.  
During this time, both slides are rendered. This means the total duration of the animation is `60 + 40 - 30 = 70`.

<TransitionsDuration />

## Presentations

A presentation determines the visual of animation.

<Presentations />

## Timings

A timing determines how long the animation takes and the animation curve.

<Timings />

## Audio transitions

See here how to include [audio effects](/docs/transitions/audio-transitions) in your transitions.

## Getting the duration of a transition

You can get the duration of a transition by calling `getDurationInFrames()` on the timing:

```tsx twoslash title="Assuming a framerate of 30fps"
import { springTiming } from "@remotion/transitions";

springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23
```

## Rules

<Step>1</Step> It is forbidden to have a transition that is longer than the duration
of the previous or next sequence. <br />
<Step>2</Step> There can be no two transitions next to each other. <br />
<Step>3</Step> There must be at least one sequence before or after a transition.

## See also

- [`@remotion/transitions`](/docs/transitions)
- [`<TransitionSeries>`](/docs/transitions/transitionseries)
